<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta name="author" content=""/>
        <link rel="icon" th:href="@{assets/images/favicon.png}" type="image/png"/>
        <title>Home</title>

        <!--Begin  Page Level  CSS -->
	    <link th:href="@{/assets/plugins/jquery-ui/jquery-ui.min.css}" rel="stylesheet"/>
	     <!--End  Page Level  CSS -->
	    <link th:href="@{/assets/css/icons.css}" rel="stylesheet"/>
	    <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet"/>
	    <link th:href="@{/assets/css/style.css}" rel="stylesheet"/>
	    <link th:href="@{/assets/css/responsive.css}" rel="stylesheet"/>
	    <link th:href="@{/css/zTreeStyle/zTreeStyle.css}" rel="stylesheet" type="text/css">
        <style type="text/css">
        	html,body{
        		height:100%;
        	}
            .container-content{
                margin: 0px;
                padding: 0px;
                width: 100%;
                height:100%;
            }
            .container-wrapper{
                padding: 0px;
                background: white;
                min-height: 100%;
                /* height:100%; */
            }
            .rMenu-button{
                cursor:pointer;
                font-size: 16px;
                line-height: 24px;
                padding:3px;
            }
        </style>
    </head>
    <body class="container-body">
        <div class="container-content">
            <div class="container-wrapper">
                <!--Start row-->
                <div class="row">
                    <div class="col-md-6">
                        <div class="white-box">
                            <h2 class="header-title">ZK节点树</h2>
                            <div>
                            	<ul id="tree" class="tree" style="float:left;"></ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6" style="position:fixed;top:5px;right:0px;">
                        <div class="white-box">
                            <div class="col-md-10">
                                <h2 class="header-title">节点数值</h2>
                                <textarea id="nodeValue" class="form-control" rows="12"></textarea>
                                <div class="button-wrap" style="margin-top: 20px;">
                                    <button id="saveDataBtn" type="button" class="btn btn-primary outline-btn">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="addnodes" id="rMenu" style="position:absolute;display:none;overflow:hidden;background:#FFF;border:0.5px dashed #000;border-radius:10px;">
                        <ul>
                            <li id="expandNode" class="rMenu-button"><button type="button" class="btn btn-info outline-btn round">展开节点</button></li>
                            <li id="addNode" class="rMenu-button"><button type="button" class="btn btn-primary outline-btn round">添加节点</button></li>
                            <li id="deleteNode" class="rMenu-button"><button type="button" class="btn btn-danger outline-btn round">删除节点</button></li>
                        </ul>
                    </div>
                </div>
                <!--End row-->
           </div>
        </div>
    </body>
    <script type="text/javascript" th:src="@{/js/jquery-2.1.4.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-ztree-2.5.js}"></script>
    <script type="text/javascript" th:src="@{/js/layer/layer.js}"></script>
    <script type="text/javascript" th:src="@{/js/zookeeper/zk.js}"></script>

</html>
